<template>
  <div class="pageAnnouncementMain">
    <PageHeader :lang="lang"></PageHeader>
    <!--公告详细-->
    <div class="news_datails"  id="pageBody" >
      <div class="Bread_crumbs">
        <router-link to="/news/announcement">{{lang['announcement Center']}}</router-link> &gt;
        <a class="active">{{lang['detailed information']}}</a>
      </div>
      <div class="newsdetail_title">
       <h2> {{Title}}</h2>
       <span>{{CreateTime}}</span>
      </div>
      <div class="newsdetail_content" v-html="Context">
      </div>
    </div>
    <!--公告详细-->
    <PageFooter2 :lang="lang" :langKey="langKey"></PageFooter2>
  </div>
</template>
<script>
import commonMixins from '@/mixins/common.js'
import Utils from '@/utils/Utils.js'
export default {
  mixins: [commonMixins],
  data () {
    return {
      keywords: '',
      Title: '',
      CreateTime: '',
      Context: ''
    }
  },
  components: {

  },
  watch: {
    langKey () {
      this.getArticleList()
    }
  },
  methods: {
    getArticleList () {
      this.keywords = this.$route.query.keywords
      this.language = this.$route.query.language
      this.$http.post('Article/GetArticleByKeyword', {
        keywords: this.keywords
      })
      .then((res) => {
        if (res.StatusCode === '200') {
          this.Title = res.Data.Title
          this.CreateTime = Utils.fixNewDateStringForIE(res.Data.CreateTime)
          this.Context = res.Data.Context
        } else {
          this.$router.push({path: '/news/announcement'})
        }
      })
    }
  },
  mounted () {
    this.getArticleList()
  }
}
</script>

<style>

.pageAnnouncementMain {
  background: #14141c;
}
.news_datails {
  width: 1200px;
  margin: 0 auto;
}

.Bread_crumbs{
  margin-top: 30px;
  height: 46px;
  line-height: 46px;
  background: #1e232d;
  color: #fff;
  font-size: 18px;
  text-indent: 20px;

}
.Bread_crumbs a{
  color: #fff;
}
.newsdetail_title{
  padding: 0 0 20px;
  border-bottom: 1px solid #2A3440;
}
.newsdetail_title h2{
  font-size: 18px;
  line-height: 36px;
  padding: 20px 0 20px 20px;
  color: #ccc;
}
.newsdetail_title span{
  color: #ccc !important;
  padding-left: 20px;
}
.newsdetail_content{
  line-height: 24px;
  padding: 20px 20px 100px;
  color: #ccc !important;
  background-color: #14141c !important;
}
.newsdetail_content p
{
  margin-top: 20px;
}
.newsdetail_content a,
.newsdetail_content p,
.newsdetail_content span,
.newsdetail_content em,
.newsdetail_content strong
{
  color: #ccc !important;
  background: #14141c !important;
}
.newsdetail_content img
{
  max-width: 100%;
  height: auto !important;
}
@media screen and (max-width:1200px){
  .news_datails {width: auto; margin: 0 16px; }
}
</style>
